<template>
	<view>
		<!-- 返回主页 -->
		<view class="back" @click="back">
			<view class="backicon"></view>
		</view>
		<view style="position: fixed;margin-left: 37%;font-size: 50rpx;font-style: italic;
		font-weight: 600;margin-top: -50px;">
			考勤申述
		</view>
		<view v-if="studenInfo.length==0" style="margin-top: 300rpx;position: fixed;margin-left: 30%;">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>

		<view style="margin-top: 200rpx;">
			<u-list height="1300rpx" @scrolltolower="scrolltolower">
				<u-list-item v-for="(i,index) in  studenInfo" :key="i">
					<view class="msgcard">
						<view class="text1">
							<text style="float: left;color:#868686;">课程名:</text>
							<view style="text-overflow: ellipsis;overflow: hidden;
								white-space: nowrap; float: left;
								width: 200rpx;">
								<text style="padding-left: 20rpx;">{{i.coursename}}</text>
							</view>
							<text style="color:#868686;padding-left: 38rpx;">教室:</text>
							<view style="text-overflow: ellipsis;overflow: hidden;
								white-space: nowrap;
								width: 200rpx;float: right;">
								<text>{{i.classroom}}</text>
							</view>
						</view>
						<view class="text1" style="margin-top: 10rpx;">
							<text style="float: left;color:#868686;">情况:</text>
							<view style="text-overflow: ellipsis;overflow: hidden;
								white-space: nowrap; float: left;
								width: 250rpx;margin-left: 20rpx;">
								<text style="display: block;" v-if="i.status==5">旷课</text>
								<text style="display: block;" v-else-if="i.status==4">迟到</text>
								<text style="display: block;" v-else-if="i.status==3">早退</text>
							</view>
							<view style="margin-top: 10rpx;text-overflow: ellipsis;overflow: hidden;
								white-space: nowrap;">
								<text style="color: #868686;">教师:</text>
								<text style="padding-left: 20rpx; ">{{i.nickname}}</text>
							</view>
							<view style="margin-top: 10rpx;float: left;">
								<text style="color:#868686;">时间:</text>
								<text style="margin-left: 20rpx;">{{i.date}}</text>
							</view>
						</view>
						<view style="float: left;width: 100%;padding-bottom: 30rpx;margin-top: 20rpx;"
							>
							<!-- <button   @click="open(i.id,i.coursename,i.date)" class="shanbaobtn">申诉</button> -->
							<view v-if="i.Auditstatus==0" style="margin-left: 20rpx;" >
								<view class="tag-view" style="display: inline-block;">
									<!-- <uni-tag :inverted="true" text="已提交" type="warning" /> -->
									<u-tag text="已提交" type="warning" ></u-tag>

								</view>
								<view style="display: inline-block;margin-left: 20rpx;color: darkblue;" @click="queryAttendence(i.xid)">详情>>></view>
							</view>
							<view v-else-if="i.Auditstatus==1" style="margin-left: 20rpx;" >
								<view class="tag-view">
									<!-- <uni-tag :inverted="true" text="已通过" type="success" /> -->
									<u-tag text="已通过" type="success" @click="queryAttendence(i.xid)"></u-tag>
								</view>
								<view style="display: inline-block;margin-left: 20rpx;color: darkblue;" @click="queryAttendence(i.xid)">详情>>></view>

							</view>
							<view v-else-if="i.Auditstatus==2" style="margin-left: 20rpx;" >
								<view class="tag-view" style="display: inline-block;">
									<!-- <uni-tag :inverted="true" text="未通过" type="error" /> -->
									<u-tag text="未通过" type="error" @click="queryAttendence(i.xid)"></u-tag>
								</view>
								<view style="display: inline-block;margin-left: 20rpx;color: darkblue;" @click="queryAttendence(i.xid)">详情>>></view>

								<view style="display: inline-block;color: darkblue;float: right;"
									@click="showReason(index)">查看原因>>
									<u-modal :show="showrea" title="原因" :content='showreason' showConfirmButton="true"
										showCancelButton="true" closeOnClickOverlay @confirm="showrea=false"
										@cancel="showrea=false">

									</u-modal>
								</view>
							</view>
							<view v-else style="width: 200rpx;margin-left: 20rpx;">
								<u-button type="primary" @click="open(i.id,i.coursename,i.date)">申诉</u-button>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<view>
			<uni-popup ref="popup" type="center">
				<view class="Suggesttext">
					<view class="nm" style="margin-top: 80rpx;margin-left: 50rpx;">
						<text style="position: fixed;margin-top: 8rpx;">考勤状态改为:</text>
					</view>
					<view>
						<text style="position: fixed;padding-left: 320rpx;padding-top: 9rpx;">已到</text>
						<u-switch v-model="model" :activeValue="2" :inactiveValue="1" @change="handleClick"
							activeColor="#f56c6c" inactiveColor="blue"></u-switch>
					</view>
					<view>
						<text style="position: absolute;margin-left: 512rpx;margin-top: -49rpx;">请假</text>
					</view>
				</view>
				<view class="Suggesttext">
					<view class="nm" style="margin-top: 30rpx;margin-left: 50rpx;">
						<text style="display: inline-flex;margin-top: 36rpx;">详细说明</text>
					</view>
					<view style="margin-top: 30rpx; width: 90%;margin-left: 5%;">
						<u--textarea v-model="suggesttext" placeholder="请描述问题,不多于200个字" placeholderStyle="color: red;"
							disableDefaultPadding border="bottom" count showConfirmBar maxlength=200
							autoHeight></u--textarea>
					</view>
					<view style="margin-top: 20rpx;padding-bottom: 20rpx;float: right;margin-right: 5%;">
					</view>
				</view>
				<view class="uploadfile">
					<text class="zj">*上传证据</text>
					<view style="margin-left: 40rpx;">
						<u-upload :fileList="fileList1" :beforeRead="beforeReadHandler" @afterRead="afterRead"
							@delete="deletePic" name="1" :maxCount="3" :previewFullImage="true"></u-upload>
					</view>
				</view>
				<view class="ts">
					<text>*为必填项,证据最多上传3张</text>
				</view>
				<view style="margin-top: 10rpx;">
					<u-button text="提交" @click="commit"
						color="linear-gradient(to right, rgb(0, 85, 255), rgb(85, 170, 255))" shape="circle"
						size="large" customStyle="width: 650rpx;margin-top:100rpx;margin-bottom:60rpx"></u-button>
				</view>
			</uni-popup>
		</view>
		<view>
			<uni-popup ref="popup1" type="center">
				{{showreason}}
			</uni-popup>
		</view>
		<u-popup :show="showAttendence" :round="20" mode="center" closeable @close="closeAtt" @open="openAtt">
			<view>
				<view style="margin-left: 280rpx;margin-top: 80rpx;font-size: 40rpx;font-weight: 600;">申诉详情</view>
				<view class="contenttext" style="width: 658rpx;">
					<view class="name2" style="margin-top: 60rpx;">
						<text style="color: black;">申诉时间:</text>
					</view>
					<view style="float: right;font-size: large;margin-top: -54rpx;">
						{{feedbackinfo.create_time | replace}}
					</view>
				</view>
				<view class="contenttext" style="margin-top: 40rpx;">
					<view class="name2">
						<text style="color: black;">内容:</text>
					</view>
					<view style="width: 630rpx; margin-left: 20rpx;margin-top: -10rpx;">
						<u--textarea v-model="feedbackinfo.description" placeholderStyle="color: red;"
							disableDefaultPadding border="none"  showConfirmBar maxlength=200 disabled
							autoHeight="true"></u--textarea>
					</view>
				</view>
				<view style="margin-left: 20rpx; margin-top: 120rpx;" v-for=' item in imglist'>
					<!--  v-for="(item, index) in imglist" -->
					<view class="img" @click="show1=true,showimg=item">
						<img :src="item" style="border-radius: 25rpx; width: 200rpx;height: 200rpx;"
							@click="clickImg(item)">
					</view>
				</view>
				<u-popup :show="show1" mode="center" :round="20" zoom bgColor="transparent" @close="closeimg"
					@open="openimg">
					<view style="margin-top: 60rpx;width: 100%;">
						<img :src="showimg" mode="aspectFit" style="border-radius: 30rpx;">
					</view>
				</u-popup>
			</view>
	</u-popup>


	</view>
</template>

<script>
	import {
		USERNAME,
		HNIT_URL
	} from '../../../constants';
	export default {
		data() {
			return {
				studenInfo: [],
				attId: 0, //考勤表id
				show: false,
				suggesttext: "", // 投诉内容
				fileList1: [], // 证明材料
				fileurllist: [], // 存放文件的url
				newfilepath: [], // 存放上传成功后返回的文件新路径
				coursename: "", //课程名
				time: "", //时间			
				value: 1,
				value1: "",
				page: 1,
				//原因
				showreason: "",
				//打开原因模态框
				showrea: false,
				model: 1,
				//看提交信息
				showAttendence: false,
				//申诉表Id
				AttendenceId:0,
				//存的是张片路径和内容
				feedbackinfo:[],
				//图片
				imglist:[]
			};
		},
		//拦截器
		filters:{
			//替换空格
			replace(value) {
				if (!value) return "";
				return value.replace("T", "  ");
			}
		},
		onLoad() {
			this.queryStuAttendanceInfo();
		},
		methods: {
			//返回主页
			back() {
				uni.redirectTo({
					url: "../../../pages/student/home/index"
				})
			},
			// 点击查看大图
			clickImg(img) {
				var imgUrl = img
				wx.previewImage({
					urls: [imgUrl],
					current: '',
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {}
				})
			},
			closeimg() {
				this.show1 = false
				this.showimg = ""
			},
			openimg() {
			},
			//打开弹窗处理
			openAtt() {
				// 请求参数
				let params = {
					id: this.AttendenceId,
				}
				this.$request.post(HNIT_URL + "wx/queryAttendenceImagePath", params).then(res => {
					this.feedbackinfo = res.data
					let index = 0;
					var commaIndex = this.feedbackinfo.imagePath.indexOf(",");
					if (commaIndex !== -1) {
						for (let i = 0; i <= 2; i++) {
							var img = this.feedbackinfo.imagePath.substring(index, index + this.feedbackinfo
								.imagePath.indexOf(","));
							index = index + img.length + 1
							img = img.replace(/\\/g, "\/"); // 替换 \ => /
							this.imglist.push(HNIT_URL + "uploadfile/" + img) // +
						}
					} else {
						// 没有逗号的处理逻辑
						var img = this.feedbackinfo.imagePath.substring(index);
						img = img.replace(/\\/g, "\/"); // 替换 \ => /
						this.imglist.push(HNIT_URL + "uploadfile/" + img) // +
					}

				})
			},
			closeAtt() {
			    this.showAttendence = false
				this.imglist = []
			},
			handleClick(value) {
				this.model = value
			},
			//查询旷课信息
			queryStuAttendanceInfo() {
				let stuid = uni.getStorageSync(USERNAME)
				let params = {
					page: this.page,
					stuid: stuid
				}
				this.$request.post(HNIT_URL + "wx/queryStuAttendanceInfo", params).then(res => {
					this.studenInfo = res.data
				})

			},
			//显示原因
			showReason(index) {
				this.showrea = true
				this.showreason = this.studenInfo[index].teacherReply
			},
			//点击查看自己的申诉
			queryAttendence(id) {
				this.showAttendence = true
				this.AttendenceId=id;
			},
			beforeReadHandler(file) {
				// 在这里限制图片大小，假设你想限制上传图片的大小为2MB
				const maxSizeInBytes = 2 * 1024 * 1024; // 2MB
				if (file.size > maxSizeInBytes) {
					// 如果文件大小超过限制，阻止文件上传
					uni.showToast({
						title: "文件大小超过限（最大2MB）",
						icon: "none",
						duration: 2000
					})
					return false;
				}
				return true;
			},
			//滑动底部加载事件
			scrolltolower() {
				let stuid = uni.getStorageSync(USERNAME)
				this.page = this.page + 1
				let params = {
					page: this.page,
					stuid: stuid
				}
				this.$request.post(HNIT_URL + "wx/queryStuAttendanceInfo", params).then(res => {
					if (Object.keys(res.data).length == 0) {
						uni.showToast({
							icon: "none",
							title: "已经到底了"
						})
					} else {
						// this.indexList = this.indexList.concat(res.data)
						this.studenInfo = this.studenInfo.concat(res.data)
					}

				})
			},
			//打开弹出层
			open(id, coursename, date) {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
				this.attId = id
				this.coursename = coursename
				this.time = date
			},
			//关闭弹出层
			close() {
				this.$refs.popup.close()
			},
			// 提交
			commit() {
				if (this.suggesttext == "") {
					uni.showToast({
						title: "请填写详细信息!",
						duration: 2000,
						icon: "none"
					})
					return;
				}
				if (this.value == "") {
					uni.showToast({
						title: "请选择要改为的状态",
						icon: "none",
						duration: 2000
					})
					return;
				}
				var stuid = uni.getStorageSync(USERNAME);
				// 上传证据照片
				for (let i = 0; i < this.fileurllist.length; i++) {
					const result = this.uploadFilePromise(this.fileurllist[i])
				}

				wx.showToast({
					title: '上传中', //提示的内容
					duration: 4000, //持续的时间
					icon: 'loading',
					mask: true //显示透明蒙层 防止触摸穿透
				})
				setTimeout(() => {
					// 请求参数
					let params = {
						stuid: stuid,
						description: this.suggesttext,
						coursename: this.coursename,
						time: this.time,
						changeStatus: this.model,
						imagePath: this.newfilepath.join(","),
						Attid: this.attId
					}
					if (this.newfilepath.length == 0) {
						uni.showToast({
							title: "请上传证明图片",
							icon: "none",
							duration: 2000
						})
						return;
					}
					// 发起请求
					this.$request.post(HNIT_URL + "wx/insertStuAttendanceInfo", params).then(res => {
						uni.showToast({
							title: res.msg
						})
						this.page = 1;
						this.queryStuAttendanceInfo();
					})

					this.suggesttext = ""
					this.fileList1 = []
					this.fileurllist = []
					this.newfilepath = []
					this.deletePic
					this.close();
				}, 1000)
			},
			// 删除上传的图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.fileurllist[event.index] = ""
			},
			// 新增图片
			async afterRead(event) {

				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length

				lists.map((item) => {
					this.fileList1.push({
						...item,
						status: 'success',
					})
				})
				for (let i = 0; i < lists.length; i++) {
					this.fileurllist.unshift(lists[i].url)
				}
			},
			// 照片上传
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: HNIT_URL + "wx/upload", // 后端api接口
						filePath: url, // uni.chooseImage函数调用后获取的本地文件路劲
						name: 'file', //后端通过'file'获取上传的文件对象
						header: {
							"Content-Type": "multipart/form-data"
						},
						success: (res) => {
							let data = JSON.parse(res.data);
							this.newfilepath.push(data.data)
							resolve(res.data)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
	.backicon {
		background-image: url("data:image/svg+xml,%3Csvg t='1689146294791' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='19508' width='200' height='200'%3E%3Cpath d='M501.30944 464.22016c0-19.99872-16-35.19488-35.99872-35.99872H310.4V350.62784L137.61536 464.22016l171.98592 113.59232V500.21888h155.70944c19.99872-0.79872 35.99872-16 35.99872-35.99872z' fill='%23005CFF' p-id='19509'%3E%3C/path%3E%3Cpath d='M886.38464 212.01408c0-39.46496-31.99488-71.45984-71.45984-71.45984H443.88864c-39.46496 0-71.45984 31.99488-71.45984 71.45984v117.69856a29.42464 29.42464 0 1 0 58.84928 0V225.00352a25.6 25.6 0 0 1 25.6-25.6h358.05184c2.72384 0 5.23264 0.88576 7.296 2.3552l-252.50816 91.904c-15.872 5.77536-28.74368 29.28128-28.74368 52.49536v382.88384H456.87808a25.6 25.6 0 0 1-25.6-25.6V598.7328a29.42464 29.42464 0 1 0-58.84928 0v117.69856c0 39.46496 31.99488 71.45984 71.45984 71.45984h97.08544v62.68928c0 23.21408 12.86656 37.3504 28.74368 31.57504l287.42144-104.61184c15.872-5.77536 28.74368-29.28128 28.74368-52.49536v-0.39424c0.3072-2.69824 0.50688-5.43232 0.50688-8.2176v-504.4224z' fill='%23005CFF' p-id='19510'%3E%3C/path%3E%3C/svg%3E");
		background-size: cover;
		width: 50rpx;
		height: 50rpx;
		margin-top: 6rpx;
		margin-left: 12rpx;
	}

	page {
		background-color: #F0F0F0;
	}

	.u-list.data-v-27d76bae {
		padding-top: 50rpx;
	}
	.u-empty data-v-0d5b1156{
		background-color: whitesmoke;
	}


	.u-radio-group.data-v-97ce24d6 {
		float: right;
		margin-top: -40rpx;
	}

	.u-popup__content.data-v-3a231fda{
		background-color: whitesmoke !important;
	}

	.contenttext{
		margin-top: 20rpx;
		background-color: #f5f7fa;
		margin-left: 40rpx;
		border-radius: 30rpx;
		width: 350px;
	}
	.back {
		position: absolute;
		width: 80rpx;
		margin-top: -105rpx;
		height: 55rpx;
		margin-left: 20rpx;
		border-radius: 80rpx;
		background-color: white;
		border: 1rpx #c6c6c6 solid;
	}

	.u-switch.data-v-3a8aa7a9 {
		margin-left: 400rpx;
	}

	.u-tag-wrapper.data-v-3732d7af {
		width: 130rpx;
	}

	.uni-popup .uni-popup__wrapper {
		background-color: whitesmoke !important;
		margin-left: 10rpx;
		width: 680rpx;

		border-radius: 50rpx;
	}

	.ts {
		margin-top: 20rpx;
		margin-left: 250rpx;
		width: 90%;
		color: #595959;
	}

	.nm {
		font-family: FZSuXSLSJW;
		color: #595959;
		font-size: 36rpx;
		margin-top: 20rpx;
		margin-left: 40rpx;
	}

	.name2{
		color: #555555;
		font-size: 34rpx;
		margin-left: 20rpx;
		line-height: 60rpx;
		font-weight: bold;
	}

	.zj {
		color: #595959;
		line-height: 100rpx;
		font-family: FZSuXSLSJW;
		font-size: 36rpx;
		margin-left: 40rpx;
	}

	.uploadfile {
		margin-top: 40rpx;
		border-radius: 30rpx;
		width: 90%;
		background-color: white;
		height: 360rpx;
		margin-left: 30rpx;
	}

	.img{
		margin-left: 30rpx;width: 200; float: left;
	}

	.Suggesttext {
		width: 90%;
		background-color: white;
		margin-top: 40rpx;
		border-radius: 30rpx;
		margin-left: 30rpx;
	}

	.title {
		margin-top: 200rpx;
		font-family: FZSuXSLSJW;
		font-size: 50rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.text1 {
		margin-top: 10rpx;
		margin-left: 20rpx;
		font-size: 35rpx;
	}

	.bohuibtn {
		width: 200rpx;
		height: 80rpx;
		background-color: white;
		float: right;
		margin-right: 20rpx;
		font-weight: bold;
		color: #868686;
		border-radius: 40rpx;
		line-height: 80rpx;
		box-shadow: 0px 2px 6px 0px #cecece;
	}

	.u-empty__text data-v-0d5b1156 {
		position: absolute;
		margin-top: 1500rpx;
	}

	.shanbaobtn {
		width: 200rpx;
		height: 80rpx;
		background-color: white;
		float: left;
		margin-left: 20rpx;
		font-weight: bold;
		color: #868686;
		border-radius: 40rpx;
		line-height: 80rpx;
		box-shadow: 0px 2px 6px 0px #cecece;
	}

	view.data-v-4980fe02,
	scroll-view.data-v-4980fe02,
	swiper-item.data-v-4980fe02 {
		margin-top: -8rpx;
	}

	.msgcard {
		margin-left: 30rpx;
		margin-top: 60rpx;
		background-color: white;
		border-radius: 10rpx;
		width: 700rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
	}
</style>